<template>
  <transition name="batch">
    <section v-if="visible && optionsList.length" class="batch-wrapper">
      <div class="select-length">
        已选中<span> {{length}} </span>项
      </div>
      <template v-if="optionsList.length">
        <div class="btn-item" v-for="item in optionsList" @click.stop="handleClick(item.type)">
          <template v-if="item.icon">
            <span v-if="item.icon.match('el-') || item.icon.match('fa')" :class="item.icon"></span>
            <nb-img v-else :url="`../../../src/assets/icon/${item.icon}.png`" width="14"></nb-img>
          </template>
          <span style="margin-left: 4px;">{{item.label}}</span>
        </div>
      </template>
      <div class="close-btn" @click="cancel">
        <span class="el-icon-close"></span>
        <span class="cancel-text" v-if="cancelText">{{cancelText}}</span>
      </div>
    </section>
  </transition>
</template>

<script>
  import NbImg from '../nb-img'
  export default {
    data () {
      return {
        visible: false
      }
    },
    props: {
      length: {
        type: Number,
        default: 0
      },
      options: {
        type: Array,
        default: () => {
          return []
        }
      },
      cancelText: {
        type: String,
        default: ''
      }
    },
    components: {
      NbImg
    },
    watch: {
      length (val) {
        if (val === 0) {
          this.hide()
        }
      }
    },
    computed: {
      optionsList () {
        return this.options.filter(item => {
          return !item.disabled
        })
      }
    },
    methods: {
      show () {
        this.visible = true
      },
      hide () {
        this.visible = false
      },
      handleClick (type) {
        this.$emit('click', type)
      },
      cancel () {
        this.hide()
        this.$root.event.$emit('cancelSelect')
        if (this.cancelText) {
          this.$emit('cancel')
        }
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.batch-wrapper{
  width: 100%;
  height: 59px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: white;
  color: rgb(126, 126, 126);
  font-size: 14px;
  z-index: 909;
  box-sizing: border-box;
  .select-length{
    span{
      color: #409eff;
    }
  }
  .btn-item{
    margin-left: 25px;
    cursor: pointer;
    font-size: 0;
    span{
      font-size: 14px;
      vertical-align: top;
    }
  }
  .btn-item:hover{
    /*color: #409eff;*/
  }
  .close-btn{
    position: absolute;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    .cancel-text{
      font-size: 14px;
      position: relative;
      top: -2px;
    }
  }
  .close-btn:hover{
    color: #409eff;
  }
}
  .batch-enter,.batch-leave-to{
    transform: translate3d(-100%, 0, 0);
    /*opacity: 0;*/
  }
  .batch-enter-active,.batch-leave-active{
    transition: all 0.3s linear;
  }
</style>
